<template>
  <!-- 当前选课管理 -->
  <div>
    <!-- 计算出当前所选课程id=1的所有人数和教师容量 -->
    <div>
      <div>
        <el-tag style="font-size: 15px">当前课程容量：{{ courseCapacity }}</el-tag>
        <el-tag style="font-size: 15px">已选人数：{{ courseSelectedNum }}</el-tag>
      </div>
    </div>

    <!-- 选课表格数据 -->
    <el-card class="order-list">
      <el-table
        :data="tableData"
        border
        class="order-table"
        style="width: 100%; font-size: 20px"
        height="500"
        stripe
        :header-cell-style="{ background: '#f5f7fa', color: '#333', fontWeight: 'bold', textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }"
        >
        <!-- 学号 -->
        <el-table-column prop="sid" label="学号" width="200px"></el-table-column>
        <!-- 学生用户名 -->
        <el-table-column prop="stuName" label="学生姓名" width="200px"></el-table-column>

        <!-- 展示操作按钮 -->
        <el-table-column label="操作" width="350px">
          <template slot-scope="scope">
            <el-button
              type="danger"
              size="small"
              icon="el-icon-delete"
              @click="handleSelCourseDeleteById(scope.$index, scope.row)"
              style="margin-bottom: 2px"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div>
        <!-- 分页导航 -->
        <div class="pagination-container">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="pageSizes"
            :page-size="selCourseDTO.pageSize"
            :current-page="selCourseDTO.pageNum"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
          <!-- 添加一个跳转按钮 -->
          <el-button style="margin-right: 10px" size="small" type="primary" @click="toPage">跳转</el-button>
        </div>
      </div>
    </el-card>
  </div>

</template>

<script>

import {
  deleteSelCourseDeleteById,
  queryCurrentSelCourseByPage,
  selCourseCalculate
} from '@/api/course/currentSelCourse'

export default {
  name: 'CurrentSelCourse',
  data() {
    return {
      // 当前课程的班级容量
      courseCapacity:0,
      // 当前课程的选课人数
      courseSelectedNum:0,
      tableData: [],   // 表格数据
      uploadExcelDialog: false, // 上传文件对话框是否显示
      file: null,
      fileList: [],
      // 用户分页查询和模糊查询
      selCourseDTO: { pageNum: 1, pageSize: 3, cid: null},
      total: 0, // 总条数
      pageSizes: [3, 5, 10, 20], // 分页尺寸
    }
  },
  methods: {
    // 分页查询
    queryCurrentSelCourseByPage() {
      this.selCourseDTO.cid = this.$route.query.courseId;
      queryCurrentSelCourseByPage(this.selCourseDTO).then(res => {
        // 返回成功
        this.tableData = res.data.records
        this.total = res.data.total
      }).catch(err => {
        console.log(err)
      })
    },
    // 分页的两个绑定事件
    handleSizeChange(size) {
      this.selCourseDTO.pageSize = size
      this.queryCurrentSelCourseByPage()
    },
    handleCurrentChange(currentPage) {
      this.selCourseDTO.pageNum = currentPage
      this.queryCurrentSelCourseByPage()
    },
    // 跳转到指定页
    toPage() {
      this.queryCurrentSelCourseByPage()
    },
    // 计算选课人数和教室容量
    selCourseCalculate(){
      let cid = this.selCourseDTO.cid
      selCourseCalculate({cid:cid}).then(ret => {
          if (ret.code === 200){
            this.courseCapacity = ret.data.courseCapacity;
            this.courseSelectedNum = ret.data.courseSelectedNum;
          }
      }).catch(err => {
        this.$message({
          message: "计算失败",
          type: "error",
        });
        console.log(err)
      })
    },

    // 通过学号sid删除改选生的选课记录
    handleSelCourseDeleteById(index, row) {
      // 首先要进行弹框提示
      this.$confirm('是否确认删除学生编号为' + '"' + row.sid + '"' + '的选课记录？', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let cid = this.$route.query.courseId;
        let sid = row.sid;
        deleteSelCourseDeleteById({ sid:sid, cid:cid}).then((ret) => {
          if (ret.code === 200) {
            this.$message({
              type: 'success',
              message: '删除成功!',
              duration: 1000
            })
            // 删除成功后，重新查询
            this.selCourseDTO.pageNum = 1
            this.queryCurrentSelCourseByPage()
          } else {
            this.$message({
              type: 'error',
              message: '删除失败',
              duration: 1000
            })
          }
        })
      })
    },
    // 添加一个专门处理日期字段的方法
    convertDateFields() {
      const dateFields = ['payTime', 'deliveryTime', 'receiveTime']
      dateFields.forEach(field => {
        if (this.courseList[field]) {
          this.courseList[field] = new Date(this.courseList[field])
        }
      })
    },
    // 格式化日期字段为后端预期的格式
    convertToDatePickerFormat(course) {
      const dateFields = ['payTime', 'deliveryTime', 'receiveTime']
      dateFields.forEach(field => {
        if (course[field] && typeof course[field] === 'string') {
          course[field] = new Date(course[field])
        }
      })
    },
    formatDateFields() {
      const dateFields = ['payTime', 'deliveryTime', 'receiveTime']
      dateFields.forEach(field => {
        if (this.courseList[field] instanceof Date) {
          this.courseList[field] = this.$moment(this.courseList[field]).format('yyyy-MM-dd')
        }
      })
    }
  },
  created() {
    this.queryCurrentSelCourseByPage();
    this.selCourseCalculate();
  }
}
</script>

<style scoped>
/* 表格整体样式 */
.el-table {
  margin-bottom: 20px;
  font-size: 13px;
  border: 1px solid #ebeef5;
}

/* 表头样式 */
.el-table th {
  background-color: #f5f7fa;
  color: #333;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
}

/* 单元格样式 */
.el-table td {
  text-align: center;
  padding: 10px 0;
  border-color: #ebeef5;
}

/* 操作按钮的间距调整 */
button.el-button {
  margin: 2px;
  width: 80px; /* 固定按钮宽度 */
}

.pagination-container {
  align-items: center;
  justify-content: center; /* 居中 */
  display: flex; /* 使其成为一个flex容器 */
  margin-top: 10px;
}

.button-container {
  display: flex;
  margin-left: 30px;
  width: 100px;
  background-color: #f5f7fa;
  margin-bottom: 20px;
  margin-top: 20px;
}

.button-container .btn_add {
  margin-right: 10px;
  text-align: center;
  font-size: 16px;
  width: 100px;
  border-top-left-radius: 5px;
}

.button-container .btb_del {
  margin-right: 10px;
  text-align: center;
  font-size: 14px;
  width: 150px;
  border-top-left-radius: 5px;
}

.order-list {
  padding: 0;
}

.order-table {
  margin-top: 20px;
}
</style>

